import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import ECharts from '@kuiper-components/echarts';

import { WARNING_CATEGORY_KEY_LABEL_MAP } from '../../../../../common/constants';

import EmptyPie from '../../../../components/empty/EmptyPie';
import Helper from '../../../../components/Helper';
import color from '../color';
import Box from '../Box';
import s from './CategoryPie.module.css';

export default function CategoryPie({ className, stats }) {
	let rs = [].concat(stats);
	rs = rs.sort(
		(a, b) => new Date(b.endTime).getTime() - new Date(a.endTime).getTime()
	);
	const total = rs?.reduce((acc, x) => acc + (x?.result?.stats?.url || 0), 0);
	const option = {
		color,
		tooltip: {
			trigger: 'item',
			formatter({ name, percent, value }) {
				return `<div style="display:flex;backgroundColor:#F9F9F9;opacity: 0.8;padding:0.5rem">
									<div style="color: #2B2C32;padding-right: 0.25rem">${name}:</div>
									<div style="color: #2B2C32;padding-right: 0.25rem">${value}</div>
									<div style="color: #2B2C32">(${percent}%)</div>
								</div>`;
			},
			backgroundColor: '#fff',
			textStyle: {
				color: '#696969',
				fontSize: 12,
			},
		},
		legend: {
			show: false,
			orient: 'vertical',
			right: 10,
			top: 20,
			icon: 'circle',
		},
		series: [
			{
				center: ['50%', '50%'],
				name: '',
				type: 'pie',
				radius: ['45%', '60%'],
				avoidLabelOverlap: false,
				hoverOffset: 5,
				data: Object.values(
					[['privacy_disclosure', '隐私信息'], ['keyword', '敏感词']].reduce(
						(obj, [key, label]) => {
							if (!obj[key]) obj[key] = { name: label, value: 0 };
							rs.forEach(x => {
								obj[key].value += x?.result?.stats?.[key] || 0;
							});
							return obj;
						},
						{}
					)
				),
				label: {
					show: true,
					position: 'center',
					formatter: `{normal|内容威胁总数\n\n} {highlight|${total}}`,
					color: '#696C78',
					fontWeight: 100,
					rich: {
						normal: {
							color: '#696C78',
							fontSize: 14,
						},
						highlight: {
							color: '#2B2C32',
							fontSize: 18,
						},
					},
				},
				emphasis: {
					label: {
						show: false,
						fontSize: 14,
					},
				},
				labelLine: {
					show: false,
				},
			},
		],
	};

	return (
		<Box
			title={
				<>
					内容违规类型分布
					<Helper overlay="按风险URL统计" placement="top" />
				</>
			}
			className={cn(className, s.trend)}
		>
			{total === 0 ? (
				<div className={s.emptyContainer}>
					<EmptyPie
						className={s.empty}
						textContent={
							<div className={s.emptyContent}>
								<div>内容威胁总数</div>
								<div className={s.num}>0</div>
							</div>
						}
					/>
				</div>
			) : (
				<ECharts className={s.chart} option={option} />
			)}
		</Box>
	);
}

CategoryPie.propTypes = {
	className: PropTypes.string,
	stats: PropTypes.arrayOf(
		PropTypes.shape({
			target: PropTypes.string,
			name: PropTypes.string,
			endTime: PropTypes.string,
		})
	),
	jobId: PropTypes.string,
};

CategoryPie.defaultProps = {
	className: s.vulTrend,
};
